<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h2>一、背景</h2>
  <div>Chrome 中文版浏览器会默认设定页面的最小字号是12px，英文版没有限制</div>
  <br>
  <div>原由 Chrome 团队认为汉字小于12px就会增加识别难度</div>
  <h2>二、解决方案</h2>
  <div>常见的解决方案有：</div>
  <ul>
    <li>zoom</li>
    <li>-webkit-transform:scale()</li>
    <li>-webkit-text-size-adjust:none</li>
  </ul>
  <h4>Zoom</h4>
  <div>zoom 的字面意思是“变焦”，可以改变页面上元素的尺寸，属于真实尺寸</div>
  <br>
  <div>其支持的值类型有：</div>
  <ul>
    <li>zoom:50%，表示缩小到原来的一半</li>
    <li>zoom:0.5，表示缩小到原来的一半</li>
  </ul>
  <style type="text/css">
    .span1{
        font-size: 12px;
        display: inline-block;
        zoom: 0.8;
    }
    .span2{
        display: inline-block;
        font-size: 12px;
    }
    </style>
    <body>
        <span class="span1">测试10px</span>
        <span class="span2">测试12px</span>
    </body>
    <h4>-webkit-transform:scale()</h4>
    <div>针对chrome浏览器,加webkit前缀，用transform:scale()这个属性进行放缩</div>
    <br>
    <div>注意的是，使用scale属性只对可以定义宽高的元素生效</div>
    <style type="text/css">
      .span3{
          font-size: 12px;
          display: inline-block;
          -webkit-transform:scale(0.8);
      }
      .span4{
          display: inline-block;
          font-size: 12px;
      }
      </style>
      <body>
          <span class="span3">测试10px</span>
          <span class="span4">测试12px</span>
      </body>
      <h4>-webkit-text-size-adjust:none</h4>
      <div>该属性用来设定文字大小是否根据设备(浏览器)来自动调整显示大小</div>
      <br>
      <div>属性值：</div>
      <ul>
        <li>percentage：字体显示的大小；</li>
        <li>auto：默认，字体大小会根据设备/浏览器来自动调整；</li>
        <li>one:字体大小不会自动调整</li>
      </ul>
      <div>这样设置之后会有一个问题，就是当你放大网页时，一般情况下字体也会随着变大，而设置了以上代码后，字体只会显示你当前设置的字体大小，不会随着网页放大而变大了</div>
      <h2>三、总结</h2>
      <div>Zoom 非标属性，有兼容问题，缩放会改变了元素占据的空间大小，触发重排</div>
      <br>
      <div>-webkit-transform:scale() 大部分现代浏览器支持，并且对英文、数字、中文也能够生效，缩放不会改变了元素占据的空间大小，页面布局不会发生变化</div>
      <br>
      <div>-webkit-text-size-adjust对谷歌浏览器有版本要求，在27之后，就取消了该属性的支持，并且只对英文、数字生效</div>
</body>
</html>